<template>

  <div class="comment">
    <div class="title">
      <span>提交评论</span>
      <span @click="$router.go(-1)">返回</span>
    </div>
    <div class="content">
      <!-- 文本框 -->
      <div class="cct">
        <van-field
          v-model.trim="content"
          rows="4"
          autofocus="true"
          autosize
          type="textarea"
          placeholder="请输入评论内容...."
        />
      </div>
      <div class="btn">
        <!-- 发表按钮 -->
        <van-button type="info" size="large" @click="submit">发表</van-button>
      </div>
      <div class="title_2">
        <span>评论列表</span>
        <span>{{ total }}条评论</span>
      </div>
      <!-- 评论内容列表 -->
      <div
        class="commentList"
        v-for="(item, index) in commentList"
        :key="index"
      >
        <p>{{ item.content }}</p>
        <p>
          <span>{{ item.user_name }}</span>
          <span>{{
            item.add_time.split("T", 1)[0] +
            " " +
            item.add_time.split(".", 1)[0].split("T", 2)[1]
          }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { getComment, submitComment } from "../apis/news";
export default {
  data() {
    return {
      content: "",
      commentList: [],
      total: 0,
      pageindex: 1,
    };
  },
  props: {
    artid: {
      type: String,
      required: true,
    },
  },
  async mounted() {
    console.log(this.artid);
    this.init();
  },
  methods: {
    async submit() {
      if (this.content == "") {
        this.$toast("请输入评论内容");
        return;
      } else {
        let res = await submitComment(this.artid, this.content);
        // console.log(res);
        if (res.data.message == "评论提交成功") {
          this.$toast.success("评论提交成功");
          this.init();
          this.content = "";
        } else {
          this.$toast.fail("评论提交成功");
        }
      }
    },
    async init() {
      let res = await getComment(this.artid, this.pageindex);
      console.log(res);
      this.commentList = res.data.message;
      this.total = res.data.total;
      // console.log(this.commentList);
    },
  },
};
</script>

<style lang="less" scoped>
.comment {
  margin-bottom: 100px;
  .title,
  .title_2 {
    height: 60px;
    display: flex;
    border: 1px solid #e9e9e8;
    justify-content: space-between;
    align-items: center;
    padding: 0px 6px;
  }
  .title,
  .title_2 > :nth-child(1) {
    font-size: 24px;
    font-weight: 700;
  }
  .title > :nth-child(2) {
    font-size: 18px;
    color: #568dcc;
    padding: 0px 70px;
  }
  .title_2 > :nth-child(2) {
    font-size: 14px;
    color: #ccc;
    padding: 0px 60px;
  }
  .cct {
    border: 2px solid #e9e9e8;
    margin: 15px 10px;
    /deep/.van-field__control {
      font-size: 18px;
    }
  }
  .btn {
    margin: 15px 10px;
    border-radius: 50%;
    .van-button--large {
      height: 50px;
      font-size: 22px;
      color: #d3f2fa;
      border-radius: 5px;
    }
  }
  .commentList {
    height: 80px;
    border: 1px solid #e9e9e8;
    line-height: 40px;
    font-size: 15px;
    color: #ccc;
    padding: 0px 10px;

    span:nth-child(1) {
      color: #1293fb;
    }
    span:nth-child(2) {
      padding-left: 130px;
    }
  }
}

</style>